<template>
	<div>
		<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd()">新增导航</el-button>
		<btn-delete :disabled="multipleSelection.length == 0" @click.native="handleBatchDelete()"></btn-delete>
		<el-table
			:data="tableData"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			stripe
			:expand-row-keys="expandedKeys"
			:tree-props="treeProps"
			@expand-change="handleExpandChange"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" reserve-selection></el-table-column>
			<el-table-column prop="name" label="导航名称" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<p class="cup" @click="handleEdit(row)" style="display: inline">
						<i :class="nameIcon(row)"></i>
						<span>{{ row.name }}</span>
					</p>
				</template>
			</el-table-column>
			<el-table-column prop="orderBy" label="排序" width="60"></el-table-column>
			<el-table-column prop="des" label="是否显示" width="100">
				<template slot-scope="{ row }">
					<span v-show="row.isShow == 1" class="color-success">显示</span>
					<span v-show="row.isShow == 2" class="color-danger">隐藏</span>
				</template>
			</el-table-column>
			<el-table-column prop="isOutsite" label="导航类型" width="100">
				<template slot-scope="{ row }">
					<span v-show="row.isOutsite == 1" class="color-success">链接导航</span>
					<span v-show="row.isOutsite == 2" class="color-primary">普通导航</span>
					<span v-show="row.isOutsite == 3" class="color-waring">路由导航</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="des" label="备注">
        <template slot-scope="{ row }">
          <span>{{ row.des || '--' }}</span>
        </template>
      </el-table-column> -->
			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" width="240">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="success" size="mini" :disabled="row.id == 1" @click="handleAdd(row)">新增子导航</el-button>
						<el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="mini" :disabled="row.id == 1" @click="handleDelete(row)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg"><el-empty :image-size="200"></el-empty></div>
		</el-table>
		<Add />
	</div>
</template>
<script>
import columnIcon from '../public/columnIcon';
export default {
	mixins: [columnIcon],
	components: {
		Add: () => import('./Add.vue')
	},
	data() {
		return {
			expandedKeys: [],
			listQuery: {
				// pId: 0,
				classType: '1'
			},
			tableData: [],
			treeProps: {
				children: 'childList',
				hasChildren: 'hasChildren'
			},
			multipleSelection: []
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('getWebColumnList', v => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('getWebColumnList');
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('queryWebColumn', this.listQuery);
			this.tableData = res.data;
		},
		handleAdd(row) {
			if (row) {
				this.$bus.$emit('webColumnAdd', row, 'add');
			} else {
				this.$bus.$emit('webColumnAdd');
			}
		},
		handleEdit(row) {
			this.$bus.$emit('webColumnAdd', row, 'edit');
		},
		handleDelete(row) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.delete(row);
				})
				.catch(() => {});
		},
		async delete(row) {
			await this.$store.dispatch('deleteWebColumn', row);
			this.getList();
		},
		//树形展开收缩
		handleExpandChange(row, flag) {
			if (flag) {
				this.expandedKeys.push(row.id);
			} else {
				let idx = this.expandedKeys.indexOf(row.id);
				this.expandedKeys.splice(idx, 1);
			}
		},
		//批量操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		//批量删除
		handleBatchDelete() {
			if (!this.multipleSelection.length) {
				this.warnMsg('请选择要删除的数据');
				return;
			}
			this.deleteTips(this.deleteAll);
		},
		//批量删除
		async deleteAll() {
			let ids = this.multipleSelection.map(v => v.id);
			await this.$store.dispatch('deleteBatchWebColumn', ids);
			this.multipleSelection = [];
			this.getList();
		}
	}
};
</script>
